<template>
	<view class="normal-login-container">
		<view class="logo-content align-center justify-center flex">
			<image style="width: 100rpx;height: 100rpx;" :src="globalConfig.appInfo.logo" mode="widthFix">
			</image>
			<view class="title">{{globalConfig.appInfo.name}}</view>
		</view>
		<view class="login-form-content">
			<wd-form ref="form" :model="loginForm">
				<wd-input class="input-item" :class="{ hover: isFocusUserName }" label="用户名" label-width="100px"
					prop="value1" v-model="loginForm.username" placeholder="请输入用户名" @focus="handleFocusUserName" />
				<wd-input class="input-item" :class="{ hover: isFocusPass }" label="密码" label-width="100px"
					prop="value2" show-password v-model="loginForm.password" placeholder="请输入密码"
					@focus="handleFocusPass" />
				<view class="login-btn">
					<wd-button type="primary" size="large" @click="handleLogin" block>提交</wd-button>
				</view>
			</wd-form>
		</view>

	</view>
</template>
<script setup>
	import {
		reactive,
		toRefs,
		getCurrentInstance
	} from 'vue';
	import {
		getCodeImg
	} from '@/api/login'
	import useUserStore from '@/store/modules/user'
	const {
		proxy
	} = getCurrentInstance()

	const data = reactive({
		codeUrl: "",
		captchaEnabled: true,
		// 用户注册开关
		register: false,
		globalConfig: getApp().globalData.config,
		loginForm: {
			username: "13222222222",
			password: "admin123",
			code: "",
			uuid: ''
		},
		isFocusUserName: false,
		isFocusPass: false
	})
	const {
		codeUrl,
		captchaEnabled,
		register,
		globalConfig,
		loginForm,
		isFocusUserName,
		isFocusPass
	} = toRefs(data)
	// 获取焦点
	function handleFocusUserName() {
		isFocusUserName.value = true;
		isFocusPass.value = false;
	}

	function handleFocusPass() {
		isFocusPass.value = true;
		isFocusUserName.value = false;
	}
	// 用户注册
	function handleUserRegister() {
		proxy.$tab.redirectTo(`/pages/register`)
	}
	// 隐私协议
	function handlePrivacy() {
		let site = globalConfig.value.appInfo.agreements[0]
		proxy.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`)
	}
	// 用户协议
	function handleUserAgrement() {
		let site = globalConfig.value.appInfo.agreements[1]
		proxy.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`)
	}
	// 获取图形验证码
	function getCode() {
		getCodeImg().then(res => {
			captchaEnabled.value = res.captchaEnabled === undefined ? true : res.captchaEnabled
			if (captchaEnabled.value) {
				codeUrl.value = 'data:image/gif;base64,' + res.img
				loginForm.value.uuid = res.uuid
			}
		})
	}
	// 登录方法
	async function handleLogin() {
		if (loginForm.value.username === "") {
			proxy.$modal.msgError("请输入您的账号")
		} else if (loginForm.value.password === "") {
			proxy.$modal.msgError("请输入您的密码")
		} else {
			proxy.$modal.loading("登录中，请耐心等待...")
			pwdLogin()
		}
	}
	// 密码登录
	async function pwdLogin() {
		useUserStore().login(loginForm.value).then(() => {
			proxy.$modal.closeLoading()
			loginSuccess()
		})
	}
	// 登录成功后，处理函数
	function loginSuccess(result) {
		// 设置用户信息
		useUserStore().getInfo().then(res => {
			proxy.$tab.reLaunch('/pages/home/index')
		})
	}
</script>
<style lang="scss" scoped>
	page {
		background-color: #ffffff;
		width: 100vw;
		height: 100vh;
		overflow: hidden;


	}

	.normal-login-container {
		width: 100%;
		height: 100%;
		position: relative;

		&::before {
			content: '';
			display: block;
			width: 100%;
			height: 47vh;
			background: linear-gradient(126deg, #93abdc 3%, #edf0f6 48%, #9dddf8 75%);
			position: absolute;
			top: 0;
			left: 0;
			mask-image: linear-gradient(to top, transparent, black 50%);
			mask: cover;
			z-index: -1;
		}

		.logo-content {
			width: 100%;
			font-size: 21px;
			padding-top: 15vh;
			display: flex;
			align-items: center;
			justify-content: center;

			.title {
				letter-spacing: 10rpx;
				font-weight: 600;
				font-size: 50rpx;
				color: #262626;
			}
		}

		.login-form-content {
			text-align: center;
			margin: 20px auto;
			margin-top: 8%;
			width: 80%;

			:deep(.wd-cell-group),
			:deep(.wd-cell-group__body),
			:deep(.wd-input.is-cell),
			:deep(.wd-input__icon) {
				background: transparent;
			}

			.input-item {
				margin: 10rpx auto;
				height: 25px;
				align-items: center;
				border-bottom: 2rpx solid #868686;

				&.hover {
					border-bottom: 2rpx solid #1942a4;
				}
			}

			.login-btn {
				margin-top: 40px;
				height: 45px;
			}

			.reg {
				margin-top: 15px;
			}

			.xieyi {
				width: 80%;
				color: #000;
				position: fixed;
				text-align: center;
				bottom: 3vh;
			}

			.login-code {
				height: 38px;
				float: right;

				.login-code-img {
					height: 38px;
					position: absolute;
					margin-left: 10px;
					width: 200rpx;
				}
			}
		}
	}
</style>